<template>
	<div class="content">
		<cl-crud @load="onLoad">
			<template #slot-datepicker>
				<div class="_top-filter">
					<div style="width:125px;">
						<el-select
							size="mini"
							class="time-type"
							v-model="selects.timeType"
							@change="val => refresh({ timeType: val, page: 1 })"
						>
							<el-option label="创建时间" :value="0"></el-option>
							<el-option label="付款时间" :value="1"></el-option>
							<el-option label="结算时间" :value="2"></el-option>
						</el-select>
					</div>
					<div style="width:350px;">
						<date-picker
							style="width:350px;"
							:datas="datas"
							@change="
								val => refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
					<div>
						<select-taobao
							class="selects"
							v-model="selects.pid"
							@change="val => refresh({ taobaoId: val, page: 1 })"
						></select-taobao>
					</div>

					<div>
						<select-staff
							class="selects"
							v-model="selects.staffId"
							@change="val => refresh({ staffId: val, page: 1 })"
						></select-staff>
					</div>
					<el-button
						@click="productExport"
						v-permission="$service.order.permission.productExport"
						type="primary"
						style="margin-left:10px"
						size="mini"
					>
						<i class="el-icon-download"></i>导出报表
					</el-button>
				</div>
			</template>
			<template #table-column-product-title="{scope}">
				<product-title
					@showdetail="val => $emit('showdetail', { ...params, ...val })"
					:data="scope.row"
					:params="params"
				></product-title>
			</template>
			<template #table-column-tljMoney="{scope}">
				<el-input
					v-model="scope.row.tljMoney"
					size="mini"
					@change="e => onTljMoneyChange(e, scope.row)"
				></el-input>
			</template>
			<template #table-column-endPrice="{scope}">
				<el-input
					v-model="scope.row.endPrice"
					size="mini"
					@change="e => onEndPriceChange(e, scope.row)"
				></el-input>
			</template>
			<template #table-column-salesRate="{scope}">
				<div :class="scope.row.salesStatus == 1 ? 'sales-top' : 'sales-bottom'">
					<span>{{ scope.row.salesRate }}%</span>
					<i class="el-icon-bottom" v-if="!scope.row.salesStatus"></i>
					<i class="el-icon-top" v-else></i>
				</div>
			</template>

			<template #table-column-itemTitle="{scope}">
				<goodsTitle :data="scope.row"></goodsTitle>
			</template>

			<template #table-column-tkStatus="{scope}">
				<el-tag size="small" type="warning" v-if="scope.row.tkStatus == 3">订单结算</el-tag>
				<el-tag size="small" v-if="scope.row.tkStatus == 12">订单付款</el-tag>
				<el-tag size="small" type="info" v-if="scope.row.tkStatus == 13">订单失效</el-tag>
			</template>
		</cl-crud>
	</div>
</template>
<script>
import DatePicker from '@/components/order/date-picker';
import ProductTitle from '@/components/order/product-title';
import GoodsTitle from '@/components/order/goods-title';
import SelectTaobao from '@/components/order/select-taobao';
import SelectStaff from '@/components/order/select-staff';
import { dateFormat, download } from '@/utils/index';
import moment from 'moment';
export default {
	data() {
		return {
			crud: null,
			selects: {
				timeType: 0,
				pid: '',
				positionId: '',
				staffId: '',
				tkStatus: ''
			},
			allTabelData: {},
			params: {
				timeType: 0,
				startTime: this.$route.query.startTime,
				endTime: this.$route.query.endTime
			},
			datas: [this.$route.query.startTime, this.$route.query.endTime]
		};
	},
	components: {
		DatePicker,
		ProductTitle,
		GoodsTitle,
		SelectTaobao,
		SelectStaff
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.order)
				.permission({
					update: true,
					delete: true
				})
				.set('dict', {
					api: {
						page: 'productStatistics'
					},
					search: {
						query: 'salesStatus'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center',
							width: 60
						},
						{
							label: '商品ID',
							prop: 'itemId',
							align: 'center',
							'class-name': 'cursor',
							width: 140
						},
						{
							label: '商品标题',
							prop: 'product-title',
							align: 'center',
							minWidth: 258
						},
						{
							label: '净利润',
							prop: 'profit',
							align: 'center',
							emptyText: '0'
						},
						{
							label: '淘礼金金额',
							prop: 'tljMoney',
							align: 'center'
						},
						{
							label: '券后价',
							prop: 'endPrice',
							align: 'center'
						},
						{
							label: '全部佣金',
							prop: 'totleCommission',
							align: 'center',
							sortable: true,
							emptyText: '0',
							width: 140
						},
						{
							label: '失效佣金',
							prop: 'invalidCommission',
							align: 'center',
							sortable: true,
							emptyText: '0',
							width: 140
						},
						{
							label: '失效订单',
							prop: 'invalidOrderNum',
							align: 'center',
							sortable: true,
							emptyText: '0',
							width: 140
						},
						{
							label: '全部单数',
							prop: 'orderNum',
							align: 'center',
							sortable: true,
							emptyText: '0',
							width: 140
						},
						{
							label: '有效单数',
							prop: 'validOrderNum',
							align: 'center',
							sortable: true,
							emptyText: '0',
							width: 140
						},
						{
							label: '有效佣金',
							prop: 'validCommission',
							align: 'center',
							sortable: true,
							emptyText: '0',
							width: 140
						}
					],
					op: {
						visible: false
					},
					props: {
						'summary-method': this.getSummaries,
						showSummary: true,
						'default-sort': {
							order: 'descending',
							prop: 'validCommission'
						}
					},
					on: {
						'row-click': (row, column) => {
							let newParams = {};
							if (this.params.startTime && this.params.endTime) {
								newParams = {
									startTime: this.params.startTime,
									endTime: this.params.endTime
								};
							}
							if (column.property === 'tljMoney' || column.property === 'endPrice') {
								return false;
							}
							this.$emit('showdetail', {
								product: row.itemTitle,
								itemId: row.itemId,
								itemLink: row.itemLink,
								...newParams
							});
						}
					}
				})
				.set('search', {
					key: {
						placeholder: '请输入商品标题、商品ID'
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-datepicker', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.params = params;
					const { list, subData } = await next(params);
					list.map(e => {
						e.totleCommission = parseFloat(e.totleCommission).toFixed(2);
					});
					this.allTabelData = subData;
				})
				.done();
			if (!(this.params.startTime && this.params.endTime)) {
				this.params = {
					...this.params,
					...dateFormat(0)
				};
			}
			app.refresh(this.params);
		},
		refresh(data) {
			if (data.startTime) {
				this.params.startTime = data.startTime;
				this.params.endTime = data.endTime;
			}
			if (data.timeType == 0) {
				data.prop = 'tkCreateTime';
			} else if (data.timeType == 1) {
				data.prop = 'tkPaidTime';
			} else if (data.timeType == 2) {
				data.prop = 'tkEarningTime';
			}
			this.crud.refresh(data);
		},
		getSummaries() {
			return [
				'总计',
				'',
				'',
				'',
				// orderNum,
				// validOrderNum,
				// invalidOrderNum,
				// validCommission
				// (parseFloat(invalidCommission) + parseFloat(validCommission)).toFixed(2),
				// validCommission,
				this.allTabelData.totalTljMoney,
				this.allTabelData.totalEndPrice,
				parseFloat(this.allTabelData.totleCommission).toFixed(2),
				this.allTabelData.invalidCommission,
				this.allTabelData.invalidOrderNum,
				this.allTabelData.orderNum,
				this.allTabelData.validOrderNum,
				this.allTabelData.validCommission
			];
		},
		productExport() {
			this.$service.order.productExport(this.params).then(res => {
				download({
					data: res,
					fileName: `产品统计-${moment().format('YYYY-MM-DD HH:mm:ss')}`
				});
			});
		},
		onTljMoneyChange(e, item) {
			this.$service.order
				.goodsTljMoney({
					gid: item.itemId,
					tljMoney: e
				})
				.then(() => {
					this.crud.refresh();
				});
		},
		onEndPriceChange(e, item) {
			this.$service.order
				.goodsTljMoney({
					gid: item.itemId,
					endPrice: e
				})
				.then(() => {
					this.crud.refresh();
				});
		}
	}
};
</script>
<style lang="stylus" scoped>
.crud-index {
  padding: 10px;
  // background-color #F0F0F7
}

._top-filter {
  display: flex;
  margin-left: 10px;
}

.content {
  height: 100%;
}
</style>
